<template>
  <view class="container">
    <view class="section">
      <text class="title">API 测试</text>
      <view class="btn" @click="testLogin">测试登录</view>
      <view class="btn" @click="testUserInfo">测试获取用户信息（需要token）</view>
      <view class="btn" @click="testCourts">测试获取场地列表</view>
      <view class="btn" @click="testMyBookings">测试获取我的预订（需要token）</view>
    </view>

    <view class="section">
      <text class="title">Storage 测试</text>
      <view class="btn" @click="testStorage">测试Storage读写</view>
      <view class="btn" @click="clearStorage">清空Storage</view>
      <view class="btn" @click="checkStorage">检查Storage状态</view>
    </view>

    <view class="section">
      <text class="title">当前状态</text>
      <text class="status">Token: {{ token ? '已设置' : '未设置' }}</text>
      <text class="status">用户: {{ user ? user.username : '未登录' }}</text>
      <text class="status">登录状态: {{ isLoggedIn ? '已登录' : '未登录' }}</text>
    </view>

    <view class="section">
      <text class="title">响应结果</text>
      <scroll-view class="result" scroll-y>
        <text>{{ result }}</text>
      </scroll-view>
    </view>
  </view>
</template>

<script>
import { login, getUserInfo } from '../../api/user.js'
import { getCourtList } from '../../api/court.js'
import { getMyBookings } from '../../api/booking.js'
import { mapState, mapGetters } from 'vuex'

export default {
  data() {
    return {
      result: '点击上方按钮测试API...'
    }
  },
  computed: {
    ...mapState(['token', 'user']),
    ...mapGetters(['isLoggedIn'])
  },
  methods: {
    testLogin() {
      this.result = '正在测试登录...'
      login({
        username: 'test',
        password: '123456'
      }).then(result => {
        this.result = '登录响应:\n' + JSON.stringify(result, null, 2)
      }).catch(err => {
        this.result = '登录失败:\n' + JSON.stringify(err, null, 2)
      })
    },

    testUserInfo() {
      this.result = '正在测试获取用户信息...'
      getUserInfo().then(result => {
        this.result = '获取用户信息响应:\n' + JSON.stringify(result, null, 2)
      }).catch(err => {
        this.result = '获取用户信息失败:\n' + JSON.stringify(err, null, 2)
      })
    },

    testCourts() {
      this.result = '正在测试获取场地列表...'
      getCourtList().then(result => {
        this.result = '获取场地列表响应:\n' + JSON.stringify(result, null, 2)
      }).catch(err => {
        this.result = '获取场地列表失败:\n' + JSON.stringify(err, null, 2)
      })
    },

    testMyBookings() {
      this.result = '正在测试获取我的预订...'
      getMyBookings().then(result => {
        this.result = '获取我的预订响应:\n' + JSON.stringify(result, null, 2)
      }).catch(err => {
        this.result = '获取我的预订失败:\n' + JSON.stringify(err, null, 2)
      })
    },

    testStorage() {
      this.result = '正在测试Storage...'

      // 测试写入
      const testData = { name: 'test', value: 123 }
      uni.setStorageSync('test_key', JSON.stringify(testData))

      // 测试读取
      const readData = uni.getStorageSync('test_key')
      let parsedData = null
      try {
        parsedData = JSON.parse(readData)
      } catch (e) {
        parsedData = '解析失败'
      }

      this.result = `Storage测试结果:\n写入: ${JSON.stringify(testData)}\n读取: ${readData}\n解析: ${JSON.stringify(parsedData)}`
    },

    clearStorage() {
      uni.clearStorageSync()
      this.result = 'Storage已清空'
    },

    checkStorage() {
      const token = uni.getStorageSync('token')
      const user = uni.getStorageSync('user')

      let userObj = null
      if (user) {
        try {
          userObj = JSON.parse(user)
        } catch (e) {
          userObj = '解析失败'
        }
      }

      this.result = `Storage状态:\ntoken: ${token}\nuser: ${user}\nuser对象: ${JSON.stringify(userObj, null, 2)}`
    }
  }
}
</script>

<style scoped>
.container {
  padding: 20px;
}

.section {
  margin-bottom: 30px;
}

.title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
  display: block;
}

.btn {
  background: #07c160;
  color: white;
  padding: 12px;
  margin: 8px 0;
  border-radius: 6px;
  text-align: center;
}

.status {
  display: block;
  margin: 5px 0;
  color: #666;
}

.result {
  background: #f5f5f5;
  padding: 10px;
  border-radius: 6px;
  height: 200px;
  font-size: 12px;
  white-space: pre-wrap;
}
</style>
